<!-- !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache" />

<!-- <link type="text/css" rel="stylesheet" href="css/tic.css" ></link> -->

<script language="JavaScript" type="text/javascript" src="scripts/mootools145-core.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/mootools1401-more.js"></script> 

<script language="JavaScript" type="text/javascript" src="scripts/lang/Lang.en-US.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/tic-scripts.js"></script>

<script language="JavaScript" type="text/javascript" src="scripts/string.utf8.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/string.md5.js"></script>

<script language="JavaScript" type="text/javascript" src="scripts/LightFace.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/LightFace.IFrame.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/LightFace.Image.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/LightFace.Request.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/LightFace.Static.js"></script>

<script language="JavaScript" type="text/javascript" src="scripts/Picker.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/Picker.Attach.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/Picker.Date.js"></script>

<script language="JavaScript" type="text/javascript" src="scripts/Editor.js"></script>

<script language="JavaScript" type="text/javascript" src="scripts/Scrollable.js"></script>

<link rel="shortcut icon" href="images/TIC.png"></link>

<!--link rel="stylesheet" type="text/css" href="tic-style.css" --><!--/link-->
<style type="text/css">

/******* TIC ********/
	html {
		/* Using this to make the height of the body 100% */
		height: 94%;
	}
	body {
		/*background-image:url('images/spacer.gif');
		background-color:#cccccc;		
	    background-repeat:no-repeat;
	    background-position:center;*/
	    margin: 40px 0px 0px 0px;
		width: 100%;
		min-height: 100%;
	    font-family: Arial, Helvetica, sans-serif;
	} 

	table, thead, tbody, tr, td, th, div, ul, li, ol, p, span, a {
		font-size: inherit;
		font-family: inherit;
	}	

	.tip.tipVisible {
		opacity: 1;
		visibility: visible;
		text-align: center;		
		position:absolute;
	    top:30px; 
	    left:30px;
	    padding: 5px;
		background-color:rgba(112,138,144,1.0);
		-moz-border-radius: 5px 5px 5px 5px;
		border-radius: 5px 5px 5px 5px;	
	    text-align: center;
		-moz-transition: opacity 0.5s ease-in-out;
	}

	#tip.tipHidden{
		opacity: 0;
		visibility: hidden;
	}	

	#tasksSlideout {
		position: fixed;
		top: 60px;
		left: 0px;
		z-index: 5;
		width: 30px;
		height: 170px;
		padding: 30px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#tasksSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px;
		height: 90%;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;	
		border-radius: 0px 5px 5px 0px;
	}
	#tasksSlideout:hover {
		left: 235px;
	}
	#tasksSlideout:hover #tasksSlideoutInner {
		left: 0;
	}	
	#tasksList{
		height: 90%;
		overflow: auto;
		font-size: 14px;
	}
	
	#timelineSlideout {
		position: fixed;
		top: 270px;
		left: 0px;
		z-index: 4;			
		width: 30px;
		height: 110px;
		padding: 3px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#timelineSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px 10px 10px 10px;
		/*height: 600px;*/
		height: 90%;
		overflow:auto;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;	
	}
	#timelineSlideout:hover {
		left: 235px;
		z-index: 6;
	}
	#timelineSlideout:hover #timelineSlideoutInner {
		left: 0px;
		z-index: 6;
	}	

	#archiveSlideout {
		position: fixed;
		top: 393px;
		left: 0px;
		z-index: 4;			
		width: 30px;
		height: 110px;
		padding: 3px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#archiveSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px 10px 10px 10px;
		height: 90%;
		overflow:auto;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#archiveSlideout:hover {
		left: 235px;
		z-index: 6;
	}
	#archiveSlideout:hover #archiveSlideoutInner {
		left: 0px;
		z-index: 6;
	}	
	#tasksListArchived{
		height: 100%;
		overflow: auto;
		font-size: 14px;
	}	

	
	#commentSlideout {
		position: fixed;
		top: 470px;
		left: 0px;
		z-index: 3;
		width: 30px;
		height: 150px;
		padding: 30px 3px 0px 0px;
		text-align: center;
		background-color:rgba(112,138,144,0.8);
		-moz-transition-duration: 0.3s;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;
	}
	#commentSlideoutInner {
		position: fixed;
		top: 40px;
		left: -235px;
		background-color:rgba(112,138,144,0.8);
		width: 215px;
		padding: 10px;
		height: 600px;
		-moz-transition-duration: 0.3s;
		text-align: left;
		-moz-border-radius: 0px 5px 5px 0px;
		border-radius: 0px 5px 5px 0px;	
	}
	#commentSlideout:hover {
		left: 235px;
		z-index: 6;
	}
	#commentSlideout:hover #commentSlideoutInner {
		left: 0;
		z-index: 6;		
	}	

	div#printOuter {
        position: absolute;
        left: 70%;
        top: 10px;
        z-index: 7;
        visibility: hidden;
	}	
	div#printInner {
        height: 150px;
        position: absolute;
        width: 250px;
        top: 0px;
        visibility: hidden;
        display: table;
	}		
	div#printText {	
		opacity: 1;
		visibility: visible;
		display: table-cell;
		vertical-align : middle;
		text-align:center;		
		-moz-border-radius: 8px;
		border-radius: 8px;
        height: 150px;
        position: relative;
		background-color:rgba(112,138,144,0.9);
		padding: 10px;
		-moz-transition: opacity 0.5s ease-in-out;
	}
	div#printText.hidden{
		opacity: 0;
		visibility: hidden;
	}
		
	#slideArea {
		background: #ccc;
		height: 300px;
		width: 20px;
		background: url(images/sliderArea.png) no-repeat center center;
	}	 
	#slideKnob {
		height: 20px;
		width: 20px;
		background: #000;
		background: url(images/sliderKnob.png) no-repeat center center;
		cursor: move;		
	}		

	.input {
		border: 1px;
		border-style: solid;		
		background-color : #99FFBB;
		border: 1px solid #008000;
		width: 150px;
		color: #888;
		-moz-border-radius: 3px;
		border-radius: 3px; 
		margin-bottom: 5px;		
	}
	.verticalTab1{
		-moz-transform: rotate(-90deg);
		-moz-transform-origin: left top;
		width: 150px;
		height: 23px;
		margin: 0px 0px 0px 0px ;
		padding: 7px 0px 0px 0px ;
		line-height:98%;
		position: absolute;
		bottom:0px;
		letter-spacing:3px;
	}
	.verticalTab2{
		-moz-transform: rotate(-90deg);
		-moz-transform-origin: left top;
		width: 90px;
		height: 6px;
		margin: 0px 0px 0px 0px ;
		padding: 7px 0px 0px 0px ;
		line-height:98%;
		position: absolute;
		bottom:0px;
		letter-spacing:3px;
	}	
	.timestamp{
		line-height:98%;
		font-size:13px;
	}

	#aboutO {
		margin: 0px 20px 0px 20px;
	}
	#aboutI {
		width: 80%;
		height: 90%;
		position: relative; 
		font-size: 12px; 
		-moz-border-radius: 30px;
		border-radius: 30px; 
		background-color:rgba(112,138,144,0.9); 
		padding: 20px 20px 40px 20px;
		margin: 0px auto 0px auto;
	} 	
	#aboutI.hidden {
		visibility: hidden;
	} 
	/*	#aboutTab {
		position: absolute;
		top: 0;
		right: 20px;
		width: 0;
		height: 0;
		border-left: 25px solid transparent;
		border-right: 25px solid transparent;
		border-bottom: 25px solid black;
		-moz-transform: rotate(45deg);
		cursor: pointer;
	}*/	
/******* TIC ********/		

/******* LIGHTFACE ********/
	.lightface {
		margin: 0;
		padding: 0;
		border-collapse: collapse;
		position: absolute;
		top: -9000px;
		left: -9000px;
	}

	.lightface td {
		padding: 0;
		margin: 0;
		background-color: transparent;
		vertical-align: top;
		font-family: 'Verdana';
		font-size: 11px;
	}

	.lightface .centerLeft, .lightface .centerRight {
		width: 10px;
		height: auto;
		background-image: url(images/lightface/b.png);
		background-repeat: repeat-y;
	}

	.lightface .topLeft, .lightface .topRight, .lightface .bottomLeft, .lightface .bottomRight {
		width: 10px;
		height: 10px;
		background-repeat: no-repeat;
	}

	.lightface .topLeft {
		background-image: url(images/lightface/tl.png);
		background-position: top left;
	}

	.lightface .topRight {
		background-image: url(images/lightface/tr.png);
		background-position: top right;
	}

	.lightface .bottomLeft {
		background-image: url(images/lightface/bl.png);
		background-position: bottom left;
	}

	.lightface .bottomRight {
		background-image: url(images/lightface/br.png);
		background-position: bottom right;
	}

	.lightface .topCenter, .lightface .bottomCenter {
		width: auto;
		height: 10px;
		background-image: url(images/lightface/b.png);
		background-repeat: repeat-x;
	}

	.lightface .lightfaceContent {
		background-color: #fff;
		border: 1px solid #555;
		position: relative;
	}

	.lightface .loading {
		display: block;
		margin: 10px auto;
	}

	.lightface .lightfaceContent .lightfaceTitle {
		font-size: 14px;
		color: #fff;
		/*background-color: #6d84b4;*/
		background-color: rgba(112,138,144,1.0);
		border: 1px solid #3b5998;
		font-weight: bold;
		margin: -1px;
		margin-bottom: 0;
		padding: 5px 10px;
	}

	.lightface .lightfaceContent .lightfaceDraggable {
		cursor:move;
	}

	.lightface .lightfaceContent .lightfaceMessage {
		overflow: auto;
		margin: 0;
		position: relative;
		padding: 5px 10px;
		border: 1px solid #fff;
	}

	.lightface .lightfaceContent .lightfaceMessage h3,
	.lightface .lightfaceContent .lightfaceMessage h4,
	.lightface .lightfaceContent .lightfaceMessage h5,
	.lightface .lightfaceContent .lightfaceMessage h6 {
		margin-top: 6px;
	}

	.lightface .lightfaceContent .lightfaceFooter {
		/*background-color: #f2f2f2;*/
		background-color: rgba(112,138,144,0.8);
		border-top: 1px solid #ccc;
		padding: 6px 10px;
		text-align: right;
	}

	.lightface .lightfaceFooter label {
		font-size: 13px;
		border-style: solid;
		background-image:url(images/lightface/button.png);
		cursor:pointer;
		font-weight:bold;
		padding:2px 6px 2px 6px;
		text-align:center;
		vertical-align:top;
		white-space:nowrap;
		border-width:1px;
		margin-left:3px;
		background-position:0 0;
		border-color:#999;
		line-height:normal !important;
		display:inline-block;
	}

	.lightface .lightfaceFooter label input {
		background:none;
		border:0 !important;
		cursor:pointer;
		font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
		font-weight:bold;
		margin:0;
		padding:1px 0 2px;
		white-space:nowrap;
		text-align:center;
		color:#fff;
		font-size:13px;
		border: 2px outset buttonface;
		text-indent:0;
		text-shadow:none;
		display:inline-block;
		color:#444;
		font-size:13px;
	}
	/* ie6 hacks */
	* html .lightface .lightfaceFooter label input { border:0; }

	.lightface .lightfaceFooter label.lightfaceblue {
		border-color: #29447E #29447E #1A356E;
		background-position:0 -48px;
	}
	.lightface .lightfaceFooter label.lightfaceblue.lightfacefocusblue { 
		/*background-color: #5b74a8; */
		background-image:none; }

	.lightface .lightfaceFooter label.lightfacegreen {
		border-color: #3B6E22 #3B6E22 #2C5115;
		background-position:0 -96px;
	}
	.lightface .lightfaceFooter label.lightfacegreen.lightfacefocusgreen { background-color: #69A74E; 
		background-image:none; 
	}

	.lightface .lightfaceFooter label.lightfaceblue input,
	.lightface .lightfaceFooter label.lightfacegreen input {
		color:#fff;
	}


	.lightface .hiddenButton {
		visibility: hidden;
	}

	.lightface .lightfaceOverlay {
		position: absolute;
		left: 0px;
		top: 0px;
		bottom: 0px;
		right: 0px;
		/*
		background-image: url(fbloader.gif);
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #fff;
		*/
		background:url(images/lightface/fbloader.gif) center center no-repeat #fff;
	}

	.lightface .lightfaceMessageBox	{ 
		overflow: auto;
		padding: 10px 10px;
		min-height: 20px;
		position:relative;
	}

	.lightface .lightFaceMessageBoxImage {
		overflow: hidden;
		padding: 0;
		background:url(images/lightface/fbloader.gif) center center no-repeat #fff;
	}

	.lightface .lightFaceMessageBoxImage img {
		display: block;
	}
/******* LIGHTFACE ********/

/******* DATEPICKER ********/
	.datepicker_dashboard {
		position: absolute;
		font-size: 10px;
		font-family: "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif;
		color: #fff;
		line-height: normal;
		width: 172px;
		height: 135px;
		padding: 14px;
		z-index: 60;
		background: url(images/frame.png) no-repeat;
	}

	/* header
	********************************************************/
	.datepicker_dashboard .header {
		position: relative;
		height: 15px;
		margin-bottom: 5px;
		padding-top: 1px;
	}

	.datepicker_dashboard .header .title {
		text-align: center;
		margin: 2px 18px 0px 18px;
	}

	.datepicker_dashboard .header .titleText {
		color: #ccff00;
	}

	.datepicker_dashboard .header .previous,
	.datepicker_dashboard .header .next,
	.datepicker_dashboard .header .closeButton {
		position: absolute;
		cursor: pointer;
		text-indent: -40px;
		overflow: hidden;
		width: 12px;
		height: 12px;
		top: 2px;
		background-image: url(images/buttons.png);
		background-position: left top;
		background-repeat: no-repeat;
	}

	.datepicker_dashboard .header .previous {
		left: 4px;
	}
	.datepicker_dashboard .header .previous:hover {
		background-position: left bottom;
	}
	.datepicker_dashboard .header .next {
		right: 4px;
		background-position: -13px top;
	}
	.datepicker_dashboard .header .next:hover {
		background-position: -13px bottom;
	}
	.datepicker_dashboard .header .closeButton {
		display: none;
		right: 0px;
		top: 0px;
		background-position: right top;
	}
	.datepicker_dashboard .header .closeButton:hover {
		background-position: right bottom;
	}

	/* body
	********************************************************/
	.datepicker_dashboard .body {
		position: relative;
		top: 0px;
		left: 2px;
		width: 168px;
		height: 112px;
		overflow: hidden;
	}

	/* time
	********************************************************/
	.datepicker_dashboard .time {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.datepicker_dashboard .time .hour,
	.datepicker_dashboard .time .separator,
	.datepicker_dashboard .time .minutes {
		background: #333;
		border: 0px;
		width: 50px;
		font-size: 32px;
		color: #fff;
		position: absolute;
		top: 10px;
		text-align: center;
		padding: 2px;
	}

	.datepicker_dashboard .time .hour {
		left: 15px;
	}
	.datepicker_dashboard .time .separator {
		background: transparent;
		width: 10px;
		left: 76px;
	}

	.datepicker_dashboard .time .minutes {
		left: 95px;
	}
	.datepicker_dashboard .time .ok {
		position: absolute;
		top: 65px;
		height: 32px;
		width: 136px;
		left: 15px;
		font-size: 20px;
	}

	/* days-grid
	********************************************************/
	.datepicker_dashboard .days .day {
		float: left;
		text-align: center;
		overflow: hidden;
		width: 23px;
		padding-top: 1px;
		height: 14px;
		margin: 0px 1px 1px 0px;
		font-weight: normal;
		color: #ccc;
	}
	.datepicker_dashboard .days .titles {
		height: 15px;
		margin-bottom: 2px;
		text-transform: uppercase;
		color: #aaa;
	}
	.datepicker_dashboard .days .day0 {
		margin-right: 0px;
	}

	.datepicker_dashboard .days .week5 .day {
		margin-bottom: 0px;
	}

	/* days-colors
	********************************************************/
	.datepicker_dashboard .days .week .day {
		cursor: pointer;
	}
	.datepicker_dashboard .days .week .day:hover {
		color: #ccff00;
	}

	.datepicker_dashboard .days .otherMonth {
		color: #444444;
	}

	.datepicker_dashboard .days .selected {
		color: #ccff00;
	}

	/* months-grid
	********************************************************/
	.datepicker_dashboard .months .month {
		float: left;
		cursor: pointer;
		text-align: center;
		padding-top: 6px;
		width: 55px;
		overflow: hidden;
		height: 21px;
		margin: 0px 1px 1px 0px;
	}

	.datepicker_dashboard .months .month3,
	.datepicker_dashboard .months .month6,
	.datepicker_dashboard .months .month9,
	.datepicker_dashboard .months .month12 {
		margin-right: 0px;
	}

	.datepicker_dashboard .months .month10,
	.datepicker_dashboard .months .month11,
	.datepicker_dashboard .months .month12 {
		margin-bottom: 0px;
	}

	/* months-colors
	********************************************************/
	.datepicker_dashboard .months .month:hover {
		color: #ccff00;
	}

	.datepicker_dashboard .months .selected {
		color: #ccff00;
	}

	/* years-grid
	********************************************************/
	.datepicker_dashboard .years .year {
		float: left;
		cursor: pointer;
		text-align: center;
		padding-top: 6px;
		width: 32px;
		overflow: hidden;
		height: 21px;
		margin: 0px 1px 1px 0px;
	}

	.datepicker_dashboard .years .year4,
	.datepicker_dashboard .years .year9,
	.datepicker_dashboard .years .year14,
	.datepicker_dashboard .years .year19 {
		margin-right: 0px;
	}

	.datepicker_dashboard .years .year15,
	.datepicker_dashboard .years .year16,
	.datepicker_dashboard .years .year17,
	.datepicker_dashboard .years .year18,
	.datepicker_dashboard .years .year19 {
		margin-bottom: 0px;
	}

	/* years-colors
	********************************************************/
	.datepicker_dashboard .years .year:hover {
		color: #ccff00;
	}

	.datepicker_dashboard .years .selected {
		color: #ccff00
	}

	/* global
	********************************************************/
	.datepicker_dashboard .unavailable {
		color: #533 !important;
		cursor: default !important;
		text-decoration: line-through;
	}

	.datepicker_dashboard table {
		border-spacing: 0px;
	}

	.datepicker_dashboard th,
	.datepicker_dashboard td {
		padding: 0px;
	}
/******* DATEPICKER ********/

/******* TextEditor ********/	
	.editorButtons { 
		margin: 2px 2px 2px 2px; 
		width: 14px;
	}
/******* TextEditor ********/		

/* Scrollbar CSS */
	.scrollbar {
		width: 21px;
		position: absolute;
		top: 0px;
		left: 0px;
		opacity: 0;
		visibility: hidden;
	}

	.scrollbar .knob {
		background: #666;
		width: 7px;
		height: 50px;
		margin: 0 7px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		cursor: pointer;
		-moz-opacity: 0.75;
		opacity: 0.75;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
	}

	.scrollbar .knob:hover {
		-moz-opacity: 1;
		opacity: 1;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	}
/* End Scrollbar CSS */

</style>

</head>

<body id="body" ondrop="doDrop(event);" onclick="saveNoteOnBodyClick(event);">

<div id="msg" style="position: absolute; left: 20px; top: 40px;" class="tips" title="bla"></div>

<div id="printOuter"><div id="printInner"><div id="printText" class="hidden"></div></div></div>

<div id="tasksSlideout">
	<p class="verticalTab1">Projects/Tasks<p>
	<div id="tasksSlideoutInner">
		<div class="tasksForms">
			<img scr="images/spacer.gif" width="200px" height="1px">
			<form id="formCreate" action="javascript: databaseEnterNewTask();">
				<input type="text" id="createName" class="input" autocomplete="off" 
				  title="Enter a new project name" 
				  value="Enter a new project name"
				  onblur="if (this.value.trim()=='') {this.value='Enter a new project name'; this.style.color='#888';}" 
				  onclick="this.value=''; this.style.color='#000';" >				  
				<button onclick="if ($('createName').get('value').trim()=='' || $('createName').get('value')=='Enter a new project name') {return false ;};" >Create New Project/Task</button>
			</form>			
<!-- 			<form id="formSearch" action="">
				<input type="text" id="searchName" title="Search" class="input">
				<button>Search</button>
			</form> -->
		</div>
		<div id="tasksList"></div>	
	</div>
</div>

<div id="itemsList"></div>

<div id="timelineSlideout">
	<p class="verticalTab2">Timeline<p>
	<div id="timelineSlideoutInner"></div>
</div>

<div id="archiveSlideout">
	<p class="verticalTab2">Archive<p>
	<div id="archiveSlideoutInner">
		<div id="tasksListArchived"></div>
	</div>
</div> 

<!-- <div id="commentSlideout">
	<p class="verticalTab" style="top: 165px;">Comment<p>
	<div id="commentSlideoutInner"></div>
</div>
-->

<div id="taskName"></div>
<div id="importanceCircles"></div>

<div id="generalIcons"></div>


<div id="aboutO">
<div id="aboutI"> 
	<div style="overflow-y: scroll; height: 100%;">
		<h3>Welcome to Task Information Collections and thank you for installing it.</h3>

		<p>TIC is a different task/project information management, where you drag your information to the extension page. More information can be found on <a href="https://pim.famnit.upr.si/tic/" target="_new">https://pim.famnit.upr.si/tic/</a></p>
		
		<p>This extension is a part of the research about how project/task collections of information are formed, used and changed over time. We need your help in this study. Your participation will also help further development of the extension.</p>

		<li>
			<span style="font-weight:bold;">Is this extension free to use and what can I do with it?</span>
			<br />
			This extension is free and open source, licensed under the MIT License. You can use it however you like, change it, distribute it, use it in your own software (closed or open sourced), projects, etc. It is provided by the copyright holders and contributors "AS IS". See terms and conditions below.
		</li>
		<br />
		<li>
			<span style="font-weight:bold;">What is happening to my data which is dragged onto this extension?</span><br />
			We leave your information (files, email, web pages) intact and the content is never opened, touched, changed or sent to anyone. When files, folders and web pages are dragged over, only paths to them are stored (and some files and folders statistics). All this and additional notes are stored on your computer (in your browser's profile folder). If you participate in the research, your TICs will also backed up on our servers and will be harvested by us. We have no means to access your files from the backup.</li>
		<br />
		<li>
			<span style="font-weight:bold;">How do I participate?</span><br />
			You do not have to do anything other than use the extension. The backup of your project spaces will once a week be transferred over a secure and encrypted connection to the server administered by our research team. However, if you do not wish to participate, please select "No" under the "Participate in research" in the properties settings of the extension.
		</li>
		<br />		
		<li>
			<span style="font-weight:bold;">Can my privacy be compromised?</span><br />
			If you participate in the research we do not know who you are. Your id looks something like this: 6d8450ee26bb97157d8ab4fa07fbcf15. Information that you put in the extension and gets transferred to our servers could potentially reveal your identity. Please do not enter sensitive information such us credit card numbers or information of national security. Nevertheless, all your information will be kept strictly private and confidential and NOT shared with anyone but our research team. If you do not participate in the research, all your information is kept on your own computer and we do not have any means to access it.
		</li> 
		<br />
		<li>
			<span style="font-weight:bold;">Is participating in the research safe?</span><br />
			No information will ever be shared with agents or entities outside the research group or used for any purpose other than tool research and development.	We do not know any information other than one you enter in the tool. The data you enter will be transmitted to, and kept on a professionally managed server by our research team at Lancaster University. While data integrity and security will be maintained on a best effort basis, we take no responsibility for data that is accidentally lost or stolen. However, if you do not wish to participate, please select "No" under the "Participate in research" in the properties settings of the extension.
		</li>
		<br />
        <!-- 		<li>
			<span style="font-weight:bold;">Can I get a backup</span><br />
			You can always get your latest back up from our server if you register your user id with a username and password (Describe HOW in the comments). If you do not want to disclose this information and you have your user id (see the Comments tab of the extension). If you want to, we can delete your back up.
		</li> -->
		<br />
	    <li>
	    	<span style="font-weight:bold;">The terms and conditions of using this extension (MIT Licence):</span><br />
			Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
			<br /><br />
			The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
			<br /><br />
			Any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed. In no event shall the copyright owner or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise, but not chocolate torte) arising in any way out of the use of this software, even if advised of the possibility of such damage. 
		</li>

	</div>

	<button type="button" onclick="printAboutHide();">
		I understand the above and agree to all terms and conditions
	</button>	
</div>
</div>

<input type="text" value="" id="duedate" style="visibility:hidden;"/>


</body>
</html>
